<script lang="ts">
export default {
  data() {
    return {
      merchantInfo: {
        storeName: '切果 NOW! （明基广场店）',
        storeAddress: '新泾镇金钟658弄活儿21号楼105室',
        category: '果切店',
        businessHours: '09:00 - 01:00',
        services: {
          refundPolicy: '无忧退款是商家为用户在商超、水果、厨房生鲜、医药、鲜花、鸭脖卤味店铺下单提供的权益，订单完成后遇商品错送漏送或质量问题可无忧退',
          invoicePolicy: '该商家支持开发票，请在下单时填写好发票抬头'
        }
      }
    };
  },
  methods: {}
};
</script>

<template>
  <div class="store-info-container">
    <!-- 店铺名称及地址 -->
    <div class="store-header">
      <h2 class="store-name">{{merchantInfo.storeName}}</h2>
      <p class="store-address">{{merchantInfo.storeAddress}}</p>
    </div>
    <!-- 商家信息部分 -->
    <div class="merchant-info">
      <h3 class="section-title">商家信息</h3>
      <div class="info-item">
        <span class="info-label">商家品类：</span>
        <span class="info-value">{{merchantInfo.category}}</span>
      </div>
      <div class="info-item">
        <span class="info-label">营业时间：</span>
        <span class="info-value">{{merchantInfo.businessHours}}</span>
      </div>
      <button class="view-license-btn">查看营业资质</button>
    </div>
    <!-- 商家服务部分 -->
    <div class="merchant-service">
      <h3 class="section-title">商家服务</h3>
      <div class="service-item">
        <span class="service-label">无忧退</span>
        <span class="service-desc">{{merchantInfo.services.refundPolicy}}</span>
      </div>
      <div class="service-item">
        <span class="service-label">开发票</span>
        <span class="service-desc">{{merchantInfo.services.invoicePolicy}}</span>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
// 全局样式
body {
  font-family: Arial, sans-serif;
}

// 店铺信息容器样式
.store-info-container {
  width: 95%;
  margin: 0 auto;
  padding: 20px;
}

// 店铺头部样式
.store-header {
  margin-bottom: 20px;
 .store-name {
    font-size: 18px;
    margin-bottom: 5px;
  }
 .store-address {
    font-size: 14px;
    color: #666;
  }
}

// 商家信息样式
.merchant-info {
  margin-bottom: 20px;
 .section-title {
    font-size: 16px;
    margin-bottom: 10px;
  }
 .info-item {
    margin-bottom: 5px;
   .info-label {
      font-weight: bold;
    }
  }
 .view-license-btn {
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: white;
    cursor: pointer;
  }
}

// 商家服务样式
.merchant-service {
 .section-title {
    font-size: 16px;
    margin-bottom: 10px;
  }
 .service-item {
    margin-bottom: 10px;
   .service-label {
      font-weight: bold;
      margin-right: 10px;
    }
   .service-desc {
      line-height: 1.4;
    }
  }
}
</style>
